<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 项目风险管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        html, body {
            height: 100%;
        }
        body {
            display: flex;
            align-items: center;
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }
        .form-register {
            width: 100%;
            max-width: 400px;
            padding: 15px;
            margin: auto;
        }
        .form-register .form-control {
            position: relative;
            box-sizing: border-box;
            height: auto;
            padding: 10px;
            font-size: 16px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body class="text-center">
    <div class="form-register">
        <h1 class="h3 mb-3 font-weight-normal">项目风险管理系统</h1>
        <h2 class="h5 mb-3 font-weight-normal">用户注册</h2>
        
        <div id="message-area"></div>
        
        <div class="form-group text-left">
            <label for="username">用户名</label>
            <input type="text" id="username" class="form-control" placeholder="请输入用户名" required autofocus>
        </div>
        
        <div class="form-group text-left">
            <label for="password">密码</label>
            <input type="password" id="password" class="form-control" placeholder="请输入密码" required>
        </div>
        
        <div class="form-group text-left">
            <label for="confirmPassword">确认密码</label>
            <input type="password" id="confirmPassword" class="form-control" placeholder="请再次输入密码" required>
        </div>
        
        <div class="form-group text-left">
            <label for="realName">真实姓名</label>
            <input type="text" id="realName" class="form-control" placeholder="请输入真实姓名" required>
        </div>
        
        <div class="form-group text-left">
            <label for="email">电子邮箱</label>
            <input type="email" id="email" class="form-control" placeholder="请输入电子邮箱">
        </div>
        
        <div class="form-group text-left">
            <label for="phone">手机号码</label>
            <input type="text" id="phone" class="form-control" placeholder="请输入手机号码">
        </div>
        
        <button id="registerBtn" class="btn btn-lg btn-primary btn-block">
            <i class="fa fa-user-plus"></i> 注册
        </button>
        
        <p class="mt-3 mb-3 text-muted">
            已有账号？<a href="/risk-management/login">立即登录</a>
        </p>
        
        <p class="mt-3 mb-3 text-muted">
            <a href="/risk-management/">返回首页</a>
        </p>
        
        <p class="mt-5 mb-3 text-muted">© 2023 项目风险管理系统</p>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(function() {
            $('#registerBtn').click(function() {
                // 清除之前的消息
                $('#message-area').empty();
                
                // 表单验证
                if (!$('#username').val()) {
                    showMessage('用户名不能为空', 'warning');
                    return;
                }
                
                if (!$('#password').val()) {
                    showMessage('密码不能为空', 'warning');
                    return;
                }
                
                if (!$('#realName').val()) {
                    showMessage('真实姓名不能为空', 'warning');
                    return;
                }
                
                // 验证密码
                if ($('#password').val() !== $('#confirmPassword').val()) {
                    showMessage('两次输入的密码不一致', 'danger');
                    return;
                }
                
                // 收集表单数据
                var userData = {
                    username: $('#username').val(),
                    password: $('#password').val(),
                    realName: $('#realName').val(),
                    email: $('#email').val() || null,
                    phone: $('#phone').val() || null,
                    role: 3 // 默认注册为普通用户(团队成员)
                };
                
                // 显示加载状态
                var $btn = $('#registerBtn');
                var originalText = $btn.html();
                $btn.html('<i class="fa fa-spinner fa-spin"></i> 注册中...').prop('disabled', true);
                
                // 发送注册请求
                $.ajax({
                    url: '/risk-management/register',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(userData),
                    success: function(response) {
                        console.log('注册响应:', response);
                        if (response.code === 200) {
                            showMessage('注册成功，即将跳转到登录页面...', 'success');
                            setTimeout(function() {
                                window.location.href = '/risk-management/login';
                            }, 2000);
                        } else {
                            showMessage(response.message || '注册失败，请稍后重试', 'danger');
                            $btn.html(originalText).prop('disabled', false);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('注册请求出错:', xhr, status, error);
                        if (xhr.status === 403) {
                            showMessage('权限错误：请刷新页面后重试', 'danger');
                        } else {
                            showMessage('系统错误，请稍后再试 (' + (xhr.status || 'unknown') + ')', 'danger');
                        }
                        $btn.html(originalText).prop('disabled', false);
                    }
                });
            });
            
            function showMessage(message, type) {
                $('#message-area').html(
                    '<div class="alert alert-' + type + ' alert-dismissible fade show" role="alert">' +
                    message +
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                    '<span aria-hidden="true">&times;</span>' +
                    '</button>' +
                    '</div>'
                );
            }
        });
    </script>
</body>
</html> 